<template>
  <div class="header-box">
    <div class="fc">
      <el-button type="info"
                 icon="el-icon-arrow-left"
                 :disabled="pathIndex<=0"
                 title="上一级"
                 @click="backFolder"></el-button>
      <el-button type="info"
                 icon="el-icon-arrow-right"
                 :disabled="pathIndex >= pathList.length-1"
                 title="下一级"
                 @click="forwardFolder"></el-button>
      <el-button type="info"
                 icon="el-icon-top"
                 :disabled="pathIndex < 1"
                 title="返回顶级"
                 @click="backLastFolder"></el-button>
      <div class="layout">
        <el-button type="info"
                   @click="onModeChange($event, 1)"
                   :class="layout?'buttonAct':''"
                   title="网格视图">
          <img :src="layout?'../../static/svg/grid.svg':'../../static/svg/grid-no.svg'"
               alt="">
        </el-button>
        <el-button type="info"
                   @click="onModeChange($event, 2)"
                   :class="layout?'':'buttonAct'"
                   title="列表视图">
          <img :src="layout?'../../static/svg/list-no.svg':'../../static/svg/list.svg'"
               alt="">
        </el-button>
      </div>
      <div class="ml30 mt8 path">
        <el-breadcrumb separator-class="el-icon-arrow-right"
                       class="vm">
          <!-- 特殊处理一下为全部文件的情况 -->
          <el-breadcrumb-item v-for="(path, index) in pathArray"
                              :key="index">
            <a href="javascript:"
               @click="getPathFromIndex(path,index)">
              {{ path === '' ? '全部文件' : path }}
            </a>
          </el-breadcrumb-item>
        </el-breadcrumb>
      </div>
    </div>
    <div class="header-box-r fc">
      <!-- 搜索 -->
      <div v-if="!isDeleted"
           class="searchInput-box">
        <!-- v-model="searchInput" 需要内部控制 -->
        <el-input size="medium"
                  :placeholder="$t('search')"
                  @input="handleInput"
                  @blur="handleInputBlur"
                  @keyup.native.enter="searchHandle"
                  prefix-icon="el-icon-search"></el-input>
        <ul v-show="isShowSearchBox"
            class="search-box">
          <li v-for="(item,index) in searchList"
              :key="index"
              @click="searchHandle($event, item)">
            <img :src="MY_URL[item.type]"
                 alt="">{{item.name}}
          </li>
          <li class="search-tip">{{searchTip||''}}</li>
        </ul>
      </div>
      <!-- 添加文件 -->
      <div v-if="!isDeleted && canAddFile">
        <el-dropdown ref="messageDrop"
                     trigger="click">
          <span class="el-dropdown-link">
            <el-button type="info"
                       icon="el-icon-plus"
                       title="新建"></el-button>
          </span>
          <el-dropdown-menu slot="dropdown">
            <ul class="newBuild-box">
              <li v-for="(item,index) in newBuildList"
                  :key="index">
                <Newbuild :mesObj="item"
                          :showList="showList"
                          @change="handleNewBuild" />
              </li>
            </ul>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
      <div v-if="isDeleted"
           class="isDeleted">
        <el-button-group>
          <el-button size="small"
                     :disabled="!this.deleList.length"
                     @click="handleDelete('all')"><img src="@/static/svg/delete.svg"
                 alt=""> <span>清除全部</span></el-button>
          <el-button size="small"
                     :disabled="!this.selectId.length"
                     @click="handleDelete('del')"><img src="@/static/svg/delete1.svg"
                 alt=""> <span>清除</span></el-button>
          <el-button size="small"
                     :disabled="!this.selectId.length"
                     @click="handleDelete('rec')"><img src="@/static/svg/recovery.svg"
                 alt=""> <span>恢复</span></el-button>
        </el-button-group>
      </div>
      <!-- 头像 -->
      <div class="header-img">
        <img src="@/static/img/33.png"
             alt="">
      </div>
    </div>
  </div>
</template>

<script>
import Newbuild from '@/components/pageComponets/Newbuild';
import { newBuildList } from '@/utils/constants';

export default {
  components: {
    Newbuild,
  },
  props: {
    menuPath: {
      type: String,
      default: '',
    },
    searchTip: {
      type: String,
      default: '',
    },
    layout: {
      type: Boolean,
    },
    showList: {
      type: Array,
      default: () => [],
    },
    pathList: {
      type: Array,
      default: () => [],
    },
    pathArray: {
      type: Array,
      default: () => [],
    },
    searchList: {
      type: Array,
      default: () => [],
    },
    pathIndex: {
      type: Number,
    },
    isDeleted: {
      type: Boolean,
      default: false,
    },
    canAddFile: {
      type: Boolean,
      default: false,
    },
    selectId: {
      type: Array,
      default: () => [],
    },
    deleList: {
      type: Array,
      default: () => [],
    },
    handleInput: {
      type: Function,
      default: () => {},
    },
    getPathFromIndex: {
      type: Function,
      default: () => {},
    },
    handleDelete: {
      type: Function,
      default: () => {},
    },
    handleNewBuild: {
      type: Function,
      default: () => {},
    },
    backFolder: {
      type: Function,
      default: () => {},
    },
    forwardFolder: {
      type: Function,
      default: () => {},
    },
    backLastFolder: {
      type: Function,
      default: () => {},
    },
    handleInputBlur: {
      type: Function,
      default: () => {},
    },
    searchInput: {
      type: String,
    },
    isShowSearchBox: {
      type: Boolean,
    },
  },
  data() {
    return {
      newBuildList,
    };
  },
  mounted() {
  },
  methods: {
    onModeChange(event, status) {
      this.$emit('onModeChange', status);
    },
    hideDropDown() {
      this.$refs.messageDrop.hide();
    },
  },
};
</script>

<style lang="scss" scoped>
.header-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 100%;
  .layout {
    margin-left: 32px;
  }
}

.header-box /deep/ .el-button--info {
  width: 32px;
  height: 32px;
  padding: 0;
  background: #f2f2f2;
  border: 1px solid #e3e3e3;
}

.header-box .header-box-r /deep/ .el-button--info {
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  background: #fff;
  margin-left: 30px;
}

.header-box .header-box-r /deep/ .el-button--info:hover {
  background: #f2f2f2;
}

.header-box-r /deep/ .el-input__icon {
  color: #b6bcc3;
}

.header-box-r .isDeleted /deep/ .el-button {
  border: none;
  background: transparent;
  & span {
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #020233;
  }
  & img {
    width: 16px;
    margin-right: 10px;
  }
}

.header-box-r .isDeleted /deep/ .el-button:hover {
  background: #f2f2f2;
}

.searchInput-box {
  position: relative;
  z-index: 100;
  .search-box {
    position: absolute;
    top: 40px;
    left: 0;
    width: 195px;
    max-height: 500px;
    overflow-y: auto;
    background: #fff;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 29, 0.1);
    border-radius: 8px;
    li {
      display: flex;
      align-items: center;
      width: 195px;
      box-sizing: border-box;
      padding: 10px;
      color: #697581;
      text-align: start;
      cursor: pointer;
      &:hover {
        background: #e2f2ff;
      }
      img {
        width: 14px;
        margin-right: 10px;
      }
    }
    .search-tip {
      display: block;
      text-align: center;
      font-size: 12px;
      color: #2a66fa;
      cursor: auto;
      &:hover {
        background: #fff;
      }
    }
  }
}

 .newBuild-box {
  box-sizing: border-box;
  padding-right: 20px;
  & > li {
    width: 200px;
    display: flex;
    align-items: center;
    padding-bottom: 22px;
    padding: 10px;
    padding-left: 20px;
  }
}

.header-box-r /deep/ .el-dropdown-link {
  outline: none;
}

.header-img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #51a8ff;
  margin-left: 30px;
  overflow: hidden;
  & img {
    width: 100%;
    height: 100%;
  }
}

</style>
